<template>
	<view class="award-record">
		<g-navbar title="获奖记录" />
		<view class="main">
			<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
				<view class="award-record-list-wrapper">
					<goodsOrderItem v-for="item,index in awardRecordList" :key="index" :topText="item.created_at"
						:goodsName="prizeName(item)" 
						:statusLabel="global.prizeOptionsList[item.type].brief" 
						:statusColor="global.prizeOptionsList[item.type].color"
						 :statusBgcolor="global.prizeOptionsList[item.type].bgcolor"
						:goodsImage="item.product_images?item.product_images:global.prizeOptionsList[item.type].icon"
						:goodsDesc="`扣除前积分余额:  `+item.ex_score"
						style="margin-bottom: 24rpx;">
						<template v-slot:info-bottom>
							<view class="order-info">
								<view class="goods-price">
									剩余积分：{{item.residue_score}}
								</view>
								<view class="total-price">
									<view class="label">
										消费积分：
									</view>
									<view class="value">
										{{item.expend_score}}
									</view>
								</view>
							</view>
						</template>
					</goodsOrderItem>
					<g-placeholder v-if="!awardRecordList.length&&pagination.loadingStatus===LOADING_STATUS.NOMORE" />
					<uni-load-more v-else :status="pagination.loadingStatus" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import goodsOrderItem from '@/components/goods_order_item/goodsOrderItem';
	import { reactive, ref, Ref, computed, ComputedRef } from 'vue';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { IAwardRecordItem, IPagination } from './types';
	import REST_URL from '@/http/http.restUrl';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	import { useStore } from 'vuex';
	import global from '@/global';
	import { PRIZE_TYPE } from '@/enum/prize'

	const store = useStore();

	const awardRecordList : IAwardRecordItem[] = reactive([]);

	const pagination : IPagination = reactive({
		pageNum: 1,
		pageSize: 10,
		loadingStatus: LOADING_STATUS.MORE,
	})

	const prizeName : ComputedRef<string> = computed(() => {
		return (item : IAwardRecordItem) => {
			switch (item.type) {
				case PRIZE_TYPE.AMOUNT:
					return item.earnings + global.prizeOptionsList[item.type].brief
				case PRIZE_TYPE.NONE:
					return global.prizeOptionsList[item.type].brief;
				case PRIZE_TYPE.PRIZE:
					return item.product_name;
				case PRIZE_TYPE.SCORE:
					return item.earnings + global.prizeOptionsList[item.type].brief
			}
		}
	})


	const getAwardRecord = async () => {
		if (pagination.loadingStatus !== LOADING_STATUS.MORE) return;
		pagination.loadingStatus = LOADING_STATUS.LOADING;
		const { data, total } = (await uni.http.POST(REST_URL.getAwardRecord, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: pagination.pageNum,
			page_num: pagination.pageSize
		})).data;
		console.log(data);
		awardRecordList.push(...data);
		pagination.pageNum++;
		pagination.loadingStatus = awardRecordList.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
	}

	const scrolltolower = () => {
		getAwardRecord();
	}

	getAwardRecord();
</script>

<style scoped lang="scss">
	@import "./awardRecord.scss";
</style>